<template>
  <view class="video">
    <statusBar></statusBar>
    <logo :back="true" :noticeUrl="'../../../tarbar/user/notice/notice'"></logo>
    <video id="myVideo" :src="resourceItem.Path"></video>
    <view class="video-name">
      <text v-if="resourceItem.ChapterName">{{ resourceItem.SubName }}：{{ resourceItem.ChapterName }}</text>
      <text v-else>{{ resourceItem.SubName }}：{{ resourceItem.ResourceName }}</text>
    </view>
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
    </view>
    <view class="content">
      <view v-show="current === 0">{{ resourceItem.ReIntroduction }}</view>
      <view v-show="current === 1">
        <view class="recommendtitle">推荐课程</view>
        <view class="recommendvidoe">
          <view class="recommendlist" v-for="(item, index) in recommendArr" :key="index" @click="gotuijianVideo(item.ResourceId)">
            <image :src="item.Thumbnail" mode=""></image>
            <text class="recommendlistname">{{ item.SubName }}</text>
            <text class="recommendlistnum">{{ item.StudyCount }}人</text>
          </view>
        </view>
      </view>
      <view v-show="current === 2">
        <view class="recommendtitle">学员笔记（{{ noteList.length }}）</view>
        <view class="recommendtitles">写笔记</view>
        <textarea v-model="userNote" />
        <view class="isshare">
          <checkbox-group @change="checkboxChange">
            <label>
              <checkbox :value="isShare.value" :checked="false" />
              笔记共享
            </label>
          </checkbox-group>
          <button type="default" @click="subNote">保存笔记</button>
        </view>

        <view class="note">
          <view class="notelist" v-for="(item, index) in noteList" :key="index">
            <view class="notelist-left"><image :src="item.Avatar"></image></view>
            <view class="notelist-right">
              <view class="notelist-title">
                {{ item.UserName }}
                <text>{{ item.CreateTime }}</text>
              </view>
              <view class="notelist-content">{{ item.NoteContent }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
  </view>
</template>

<script>
import statusBar from "@/components/status-bar.vue"
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import logo from '@/components/logo.vue';
export default {
  components: {
    logo,
    uniSegmentedControl,
    statusBar
  },
  onLoad: function(option) {
    this.rId = option.id;
    uni.request({
      url: this.apiUrl + 'api/Student/Study/GetVideo',
      data: {
        sourceId: this.rId
      },
      success: res => {
        if (res.statusCode == 200) {
          this.resourceItem = res.data.data;
          this.resourceItem.Path = this.apiUrl + this.resourceItem.Path;
          
          this.resourceItem.Path = this.resourceItem.Path.replace(/\\/g,'\/');
        } else {
          this.msg = '未知错误';
          this.togglePopup('middle');
        }
      }
    });
    this.getRecommendVideo();
  },
  created() {
    if (uni.getStorageSync('token') == null || uni.getStorageSync('token') == undefined || uni.getStorageSync('token') == '') {
      uni.reLaunch({
        url: '../../../login/login'
      });
    } else {
      
    }
  },
  data() {
    return {
      type: '',
      rId: '',
      rPath: '',
      resourceItem: {},
      recommendArr: [],
      items: ['课件概述', '推荐课程', '学员笔记'],
      current: 0,
      styleType: 'text',
      activeColor: '#27B28B',
      isShare: [
        {
          value: false,
          checked: false
        }
      ],
      userNote: '',
      noteList: [],
      videoContext: ''
    };
  },
  onReady: function(res) {
    this.videoContext = uni.createVideoContext('myVideo');
  },
  watch: {
    current: function() {
      if (this.current == 2) {
        if (uni.getStorageSync('token') == null || uni.getStorageSync('token') == undefined || uni.getStorageSync('token') == '') {
          uni.reLaunch({
            url: '../../../login/login'
          });
        } else {
          this.getNoteList();
          this.userNotes();
        }
      }
    }
  },
  methods: {
    bindInputBlur: function(e) {
      this.inputValue = e.target.value;
    },
    gotuijianVideo: function(id){
      uni.navigateTo({
        url: 'video?id='+ id +''
      });
    },
    getRandomColor: function() {
      const rgb = [];
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16);
        color = color.length == 1 ? '0' + color : color;
        rgb.push(color);
      }
      return '#' + rgb.join('');
    },
    onClickItem(index) {
      if (this.current !== index) {
        this.current = index;
      }
    },
    //获取推荐视频
    getRecommendVideo: function() {
      uni.request({
        url: this.apiUrl + 'api/Student/Study/GetRecommendVideo',
        data: {},
        success: res => {
          this.recommendArr = res.data.data;
          for (let i in this.recommendArr) {
            this.recommendArr[i].Thumbnail = this.apiUrl + 'Resources/Course/' + this.recommendArr[i].Thumbnail;
          }
        }
      });
    },
    //获取笔记列表
    getNoteList: function() {
      uni.request({
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token') //自定义请求头信息
        },
        url: this.apiUrl + 'api/Student/Study/GetNoteList',
        data: {
          sourceId: this.rId,
          limit: '100000',
          page: '1'
        },
        success: res => {
          if (res.statusCode == 200) {
            this.noteList = res.data.data.noteList;
            for (let i in this.noteList) {
              this.noteList[i].Avatar = this.apiUrl + 'Resources/Course/' + this.noteList[i].Avatar;
            }
          } else {
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    //获取自己的笔记
    userNotes: function() {
      uni.request({
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/Student/Study/GetSelfNote',
        data: {
          sourceId: this.rId
        },
        success: res => {
          if (res.statusCode == 200) {
            if (res.data.data != null) {
              this.userNote = res.data.data;
            } else {
              this.userNote = '';
            }
          } else {
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    subNote: function() {
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Study/SubmitNote',
        data: {
          NoteId: this.noteId, //可选参数，新增时此参数为空，修改时则有值
          NoteContent: this.userNote, //内容
          IsShare: false, //是否分享
          ResourceId: this.rId //资源Id
        },
        success: res => {
          console.log(res);
          if (res.statusCode == 200) {
            this.msg = '保存成功';
            this.togglePopup('middle');
          } else {
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    checkboxChange: function(e) {
      console.log(e.detail.value);
    }
  }
};
</script>

<style scoped>
.video video {
  width: 100%;
}
.video-name {
  height: 85upx;
  line-height: 85upx;
  color: #ffffff;
  font-size: 28upx;
  text-indent: 25upx;
  background-color: #383838;
  margin-top: -14upx;
}
.uni-padding-wrap {
  background-color: #fff;
}
.segmented-control {
  width: 100% !important;
}
.segmented-control-item {
  line-height: 40px !important;
}
.content {
  background-color: #f2f2f2;
}
.recommendtitle {
  font-size: 28upx;
  line-height: 28upx;
  color: #333333;
  padding-top: 50upx;
  padding-bottom: 10upx;
  text-indent: 25upx;
}
.recommendtitles {
  font-size: 28upx;
  line-height: 28upx;
  color: #666666;
  padding-top: 20upx;
  padding-bottom: 10upx;
  text-indent: 25upx;
}
.recommendvidoe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  justify-content: space-evenly;
  padding-bottom: 30upx;
}
.recommendlist {
  margin-top: 30upx;
  width: 337upx;
  height: 361upx;
  background-color: #ffffff;
  border-radius: 0px 0px 4px 4px;
  border: solid 1upx #dddddd;
}
.recommendlist image {
  width: 100%;
  height: 251upx;
}
.recommendlist .recommendlistname {
  font-size: 24upx;
  line-height: 24upx;
  color: #666666;
  display: block;
  padding: 15upx;
}
.recommendlist .recommendlistnum {
  font-size: 18upx;
  line-height: 18upx;
  color: #888888;
  display: block;
  padding: 10upx 15upx;
}
textarea {
  width: 662upx;
  height: 185upx;
  background-color: #ffffff;
  border-radius: 6px;
  border: solid 1px #cccccc;
  margin: 15upx auto;
  padding: 20upx;
  font-size: 22upx;
  color: #999999;
}
.isshare {
  width: 702upx;
  margin: 20upx auto 50upx auto;
  font-size: 22upx;
  color: #999999;
  position: relative;
}
.isshare checkbox {
  vertical-align: middle;
  margin-right: 5upx;
}
.isshare button {
  width: 160upx;
  height: 60upx;
  line-height: 60upx;
  background-color: #27b28b;
  border-radius: 4upx;
  font-size: 28upx;
  color: #ffffff;
  padding: 0;
  position: absolute;
  right: 0upx;
  top: 0upx;
}
.note {
  width: 702upx;
  margin: 0 auto;
  padding-bottom: 40upx;
}
.notelist {
  width: 100%;
  border-top: 1upx solid #dddddd;
  padding-top: 27upx;
  display: flex;
  flex-direction: row;
}
.notelist-left {
  width: 110upx;
}
.notelist-left image {
  width: 80upx;
  height: 80upx;
  border-radius: 50px;
}
.notelist-right {
  width: 592upx;
}
.notelist-title {
  font-size: 28upx;
  font-weight: bold;
  color: #666666;
}
.notelist-title text {
  font-size: 24upx;
  color: #999999;
  float: right;
  font-weight: normal;
}
.notelist-content {
  font-size: 24upx;
  line-height: 40upx;
  color: #666666;
  padding: 15upx 0 20upx 0;
}
</style>
